<template>
  <div class="com-wrapper" :style="{width:w,height:h}">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in list" :key="index">
        <div class="swiper-image" :style="{'background-image':`url('${item}')`,width:w,height:h,'background-size':cover?'cover':'contain'}"></div>
      </swiper-slide>
      <!-- 根据情况引入控件 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
/**
 * @list 图片数组
 * @w 宽度，默认 100%
 * @h 高度，默认 600px
 * @cover 图片缩放模式，默认true,按最大显示
 */
export default {
  name: "swiper-page-image",
  props:{
    list:{
      type:Array,
      default:[],
    },
    w:{
      type:String,
      default:'100%',
    },
    h:{
      type:String,
      default:'600px'
    },
    cover:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      swiperOption: {
        spaceBetween: 0, // 图片之间的间距
        centeredSlides: true, // 居中还是从图1开始
        slidesPerView: "auto", // 一屏幕显示几个? 数字或者默认  auto 自动。
        notNextTick: true, // true:加载后允许触发事件 false:加载后不可以触发事件
        loop: true, // 循环
        initialSlide: 0, // 从第几个开始
        autoplay: {
          delay: 5000, // 等5秒下一个
          disableOnInteraction: false, // 中间滑动一下，取消自动吗？
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        }, // 下按钮
        speed: 800, // 滑动时候动画的速度
        paginationClickable: false, // 下面按钮让点吗
        navigation: {
          prevEl: ".swiper-button-prev", // 左侧按钮
          nextEl: ".swiper-button-next", // 右侧按钮
        },
        effect: "slide",
        watchSlidesProgress: true, // 开启这个参数来计算每个slide的progress
        watchSlidesVisibility: true, // 先要开启watchSlidesProgress参数，如果开启watchSlidesVisibility，则会在每个slide增加一个指示该slide的progress值得classname
        autoHeight: true  // 图片高度自适应
      }
    };
  },
};
</script>

<style lang="scss" scoped>
.com-wrapper{
  max-width:100vw;
  max-height:100vh;
  margin:0;
  padding:0;
  position:relative;
}

.swiper-slide {
  width:100%;
  .swiper-image {
    width:100% !important;
    min-height: 300px;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center center;
  }
}
.swiper-slide-active {
  .swiper-image{
    // transform: scale(1);
  }
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  .swiper-pagination-bullet{
    width: 15px;
    height: 15px;
  }
  .swiper-pagination-bullet-active{
    width: 15px;
    height: 15px;
  }
  bottom: 10px;
  left: 0;
  width: 100%;
}
</style>
